<template>
  <div class="content">
    <div v-if="list.length>0" class="list-block">
      <router-link :to="{name:'company',query:{id:item.ent.id}}"  v-for="(item,index) in list" :key="item.id" class="position-item">
        <div class="info-block">
          <div class="company-block">
            <img :src="item.ent.logoUrl" alt="" class="company-photo" @error="imgError">
            <div class="info-item">
              <div class="name">{{item.ent.enterpriseName}}</div>
              <div class="industry">{{item.ent.enterpriseTypeText}}</div>
              <div class="scale">{{item.ent.scaleName}}</div>
            </div>
          </div>
        </div>
      </router-link>
    </div>
    <el-empty v-else ></el-empty>
    <div v-if="list.length>0 && count>limit" style="display: flex; justify-content: center;align-content: flex-end;">
      <el-pagination
          background
          :page-size="limit"
          layout="prev, pager, next"
          :total="count"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange" >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { LookMeFindByCidListApi} from "@/api/Account";

export default {
  name: "MyGetLookMeConcern",
  data() {
    return {
      list:[],
      page: 1,
      limit: 10,
      count: 0
    }
  },
  methods: {
    imgError(){
      this.data.comRecruiters.enterprise.logoUrl = process.env.VUE_APP_COM_URL;
    },
    LookMeFindByCidList() {
      LookMeFindByCidListApi({userType:1,lookMeType:2,page: this.page,limit: this.limit}).then((res) => {
        this.list = res.list;
        this.count = res.count
      })
    },
    // 每页显示数量change
    handleSizeChange(e) {
      this.limit = e
      this.LookMeFindByCidList()
    },
    // 当前页change
    handleCurrentChange(e) {
      this.page = e
      this.LookMeFindByCidList()
    },

  },
  mounted() {
    this.LookMeFindByCidList();
  }
}
</script>

<style lang="scss" scoped>
.content{
  width: 100%;
  margin: 0 auto;
  min-height: $fullMinHeight;
  .list-block{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    .position-item {
      width: calc((100% - 20px) / 2);
      padding: 20px;
      margin-bottom: 15px;
      background-color: #fff;
      cursor: pointer;
      align-items: center;
      .info-block{
        width:calc(100% - 120px);
        height: 100%;
        display: flex;
        flex-direction: column;
        .position-name-block{
          display: flex;
          flex-direction: row;
          align-items: center;
          margin-bottom: 15px;
          .position-name{
            font-size: 19px;
            font-weight: bold;
            margin-right: 20px;
          }
          .position-wage{
            font-size: 17px;
            font-weight: bold;
            color: $orange;
          }
        }
        .position-label-block {
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;

          .position-label-item {
            margin-right: 10px;
            margin-bottom: 10px;
            color: $darkGray;
            background: $lightGray;
            padding: 4px 8px;
            font-size: 13px;
          }
        }
        .company-block{
          display: flex;
          flex-direction: row;
          align-items: center;
          font-size: 14px;
          .company-photo{
            width: 45px;
            height: 45px;
            margin-right: 10px;
          }
          .info-item{
            display: flex;
            flex-direction: column;
            .div{
              margin-right: 20px;
            }
            .industry,.scale{
              color: $darkGray;
            }
          }
        }
      }
      .hr-block{
        width: 120px;
        align-self: flex-start;
        display: flex;
        flex-direction: column;
        align-items: center;
        .photo{
          width: 55px;
          height: 55px;
          border-radius: 50%;
        }
        .name{
          margin-top: 10px;
          font-size: 14px;
        }
      }
    }
  }
}

</style>
